<template>
	<div class="address" >
		<!--添加地址-->
		<div class="addAddress" shadow="never" >
			
			<div class="addAddress_intro">
				地址管理
				<div class="hr"></div>
			</div>
			<el-form :model="userAddress" 
				:rules="rules" 
				ref="userAddress" 
				label-width="120px" 
				size="medium"
				label-position="left"
				class="addAddress_form"
				>
				<el-form-item label="收货人姓名" prop="receiver_name">
					<el-input v-model="userAddress.receiver_name" style="width:150px"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="receiver_telephone">
					<el-input  v-model="userAddress.receiver_telephone" style="width:150px"></el-input>
				</el-form-item>
				
				<el-form-item label="详细地址" prop="receiver_address" >
					<el-input type="textarea" v-model="userAddress.receiver_address" style="width:300px" ></el-input>
				</el-form-item>
				
				
				
				<el-form-item label="选择标签" prop="receiver_label" >
					<el-select v-model="userAddress.receiver_label" placeholder="请选择活动区域">
						<el-option label="家" value="家"></el-option>
						<el-option label="学校" value="学校"></el-option>
						<el-option label="公司" value="公司"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="设置为默认地址" prop="defult_flag" >
					
					<el-switch v-model="select"></el-switch>
					
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submitForm('userAddress')">保存</el-button>
					<el-button @click="resetForm('userAddress')">重置</el-button>
				</el-form-item>
				
			</el-form>
		</div>
		
		
		<!--地址列表-->
		<div class="addressList">
			<el-card class="addressList_show">
			<el-table :data="tableData" border style="width: 100%" max-height="250">
				<el-table-column prop="receiver_name" label="收货人" width="180">
				</el-table-column>
				<el-table-column prop="receiver_address" label="收货人详细地址" width="180">
				</el-table-column>
				<el-table-column prop="receiver_telephone" label="联系方式">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100px">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
						<el-button type="text" size="small" @click="modify(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			</el-card>
		</div>
		
		
		<!-- 修改地址弹出框 -->
		
		<el-dialog title="修改收货地址" :visible.sync="dialogFormVisible" width="600px" center>
			<el-form 
				:model="formUserAddress" 
				:rules="rules" 
				ref="ruleForm" 
				label-width="120px" 
				size="medium" 
				label-position="left"
				>
				
				<el-form-item label="收货人姓名" prop="name">
					<el-input v-model="formUserAddress.receiver_name" style="width:150px"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="telephone">
					<el-input v-model="formUserAddress.receiver_telephone" style="width:150px"></el-input>
				</el-form-item>
			
				<el-form-item label="详细地址" prop="address">
					<el-input type="textarea" v-model="formUserAddress.receiver_address" style="width:300px"></el-input>
				</el-form-item>
			
				<el-form-item label="选择标签" prop="label">
					<el-select v-model="formUserAddress.receiver_label" placeholder="请选择活动区域">
						<el-option label="家" value="家"></el-option>
						<el-option label="学校" value="学校"></el-option>
						<el-option label="公司" value="公司"></el-option>
					</el-select>
				</el-form-item>		
				
				<el-form-item label="设置为默认地址" prop="select">		
					<el-switch v-model="select2"></el-switch>			
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="modifysubmit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		
		data() {
			return {
				//先默认为2
				user_ID:'',
				is_default:1,
				tableData: [],
				select:true,
				select2:true,
				userAddress: {
					user_id:2,
					receiver_name: '',
					receiver_label: '',
					receiver_address: '',
					receiver_telephone: '',
					defult_flag:1,
					is_delete:1,
				},
				rules: {
					receiver_name: [{
							required: true,
							message: '请输入收货人姓名',
							trigger: 'blur'
						},
						{
							min: 0,
							max: 25,
							message: '长度不超过25个字符',
							trigger: 'blur'
						}
					],
					receiver_address: [{
						required: true,
						message: '请填写详细地址',
						trigger: 'blur'
					}],
					receiver_telephone: [{
						required: false,
						message: '请填写联系方式',
						trigger: 'blur'
					}]
		
				},
				//地址修改表格
				dialogTableVisible: false,
				dialogFormVisible: false,
				
				//地址修改弹出框中的form
				formUserAddress: {
					address_id:'',
					user_id:'',
					receiver_name: '',
					receiver_label: '',
					receiver_address: '',
					receiver_telephone: '',
					defult_flag:1,
					is_delete:1,
				},
				formLabelWidth: '120px'
			};
		},
		created() {
			this.axios.get(`http://localhost:8080///user/getlogin`).then(res => {
				console.log(res.data.loginUser.user_id);
				this.user_ID = res.data.loginUser.user_id;
				this.axios.get(`http://localhost:8080//useraddress/getaddresslist/`).then(res => {
					console.log(res.data);
					this.tableData = res.data.AddressList;
				})
			})
		},
		methods: {
			handleClick(row) {
				console.log(row.address_id);
				this.axios.get(`http://localhost:8080//useraddress/deleteaddress/`+row.address_id).then(res => {
					console.log("当前需要删除的地址");
					console.log(res.data);
					this.axios.get(`http://localhost:8080//useraddress/getaddresslist/`).then(res => {
						console.log("删除过后的地址列表");
						console.log(res.data);
						this.tableData = res.data.AddressList;
					})
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.select);
						if(this.select){
							//玄中寺传值为1
							this.userAddress.defult_flag=1;
							console.log(this.userAddress);
							// console.log(this.UserAddress.defult_flag);
							this.axios.post(`http://localhost:8080//useraddress/addaddress`,this.userAddress).then(res => {
								//更新显示列表
								this.updateList();
							})
						}else{
							//被选中时传值为0
							this.userAddress.defult_flag=0;
							this.axios.post(`http://localhost:8080//useraddress/addaddress`,this.userAddress).then(res => {
								this.updateList();
							})
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			modify(row){
				console.log(row);
				//行信息传递
				this.dialogFormVisible = true;
				if(row.defult_flag == 1){
					this.select2 = true;
				}else{
					this.select2 = false;
				}
				this.formUserAddress.address_id = row.address_id;
				this.formUserAddress.user_id = this.user_ID;
				this.formUserAddress.receiver_name = row.receiver_name;
				this.formUserAddress.receiver_label = row.receiver_label;
				this.formUserAddress.receiver_telephone = row.receiver_telephone;
				this.formUserAddress.receiver_address = row.receiver_address;
				
			},
			modifysubmit(){
				this.dialogFormVisible = false;
				this.axios.post(`http://localhost:8080//useraddress/modifyaddress`,this.formUserAddress).then(res => {
						console.log(res.data);
						this.updateList();
	
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			updateList(){
				this.axios.get(`http://localhost:8080//useraddress/getaddresslist/`).then(res => {
					this.tableData = [];
					this.tableData = res.data.AddressList;
				})
			},
		},

	}
</script>

<style lang="less">
	.address{
		width: 100%;
		height: 100%;
		// display: flex;
		// flex-direction: column;
		//添加地址
		.addAddress{
			
			margin:20px;
			.addAddress_intro{
				font-family: "Helvetica Neue";
				font-size: 26px;
				line-height: 28px;
				color: #606266; //字体颜色
				letter-spacing: 1px;
			}
			.addAddress_form{
				//地址添加表单的位置调整
				padding-top: 10px;
				padding-bottom: 30px;
				padding-left: 10px;
				//background-color: lightblue;
			}
			
		}
		//地址列表
		.addressList{
			height: 100%;
			.addressList_show{
			}
		}
		
		.hr {
			border-bottom: 1px solid #f5a8a8;
			height: 0px;
			margin-top: 10px;
		}
	}
</style>
